﻿/* common */
#searchSuggestions {
    
    position: absolute;
    z-index: 40000;
    top: 2.5em;
    left: 0;
    width: 100%;
}

#suggestionsContainer { background: #e8e8e8; border: 1px solid #989898; position: relative; }
#suggestionsContainer:after { content:""; display: block; clear: both; }

.ac-title { display: block; padding: 0.3125em 0 0.625em 0; font-size: 110%; font-weight: bold; }

#searchSuggestions .cel-ac-icon-cancel { color: #000; cursor: pointer; position: absolute; top:0.3125em; right: 0.3125em;}
.cel-ac-icon-cancel:before { content: 'X'; font-weight: bold; display: block; padding: 0.5em; border: 1px solid #989898; border-radius: 1em; }

/*text list*/
#topQueries { float: left; width: 24%; padding: 0 0.5%; text-align: left; }
ul#queryList { list-style: none; }
ul#queryList li { display: block; padding: 0.3125em; }
 ul#queryList li:hover { background: #fff; }

/*product list*/
#topProducts { background: #fff; float: left; width: 74%; padding-left: 1%; text-align: left; }

ul#productsList { list-style: none; }
ul#productsList li { float: left; width: 32%; margin: 0 1% 0 0; padding-bottom: 0.625em; }
ul#productsList li:nth-child(3n+1) { clear: left; }
div.ac-prod-details { padding-bottom: 0.3125em; }
div.ac-prod-details a { }
div.ac-prod-details a img { width: 100%; }
div.ac-prod-details a .ac-prod-title { display: inline; }

div.ac-prod-shop {}
.ac-prod-shop .ac-prod-price {}


@media screen and (min-width: 1025px) {
    #searchSuggestions { width: 120%; left: -10%; }
}

/* updates to new style 2022 */
#searchSuggestions #suggestionsContainer { border: none; }
#suggestionsContainer { box-shadow: 0 6px 10px rgb(0 0 0 / 60%); }
.ac-queries-title { padding: 0.5em 0 0 0.3125em; display: block; font-size: 110%; font-weight: bold; }
#topProducts .ac-title { padding: 0.5em 0 0 0.3125em; }
#topProducts .viewall { display: block; text-align: center; padding: 1.25em 0; }

#topProducts ul#productsList { display: flex; flex-wrap: wrap; gap: 1rem; }
#topProducts ul#productsList li { float: none; clear:none; width: auto; max-width: 46%; margin: 0; padding-bottom: 0; }

@media screen and (min-width: 768px) { #topProducts ul#productsList li { max-width: 31%; } }
@media screen and (min-width: 1025px) { #topProducts ul#productsList li { max-width: 22%; } }